<template>
  <div class="dplayer-page">
    <div id="dplayer"></div>
    <br />
    <div id="dplayer1"></div>
  </div>
</template>
<script>
import "hls.js";
import Hls from "hls.js";
import DPlayer from "dplayer";

export default {
  name: "dplayer-page",
  components: {},
  data() {
    return {
      dp: null,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initDPlayer();
  },
  methods: {
    initDPlayer() {
      // const dp1 = new DPlayer({
      //   container: document.getElementById("dplayer1"),
      //   video: {
      //     url: "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
      //     // url: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
      //     type: "hls",
      //   },
      //   pluginOptions: {
      //     hls: {
      //       // autoplay: true,
      //       // hls config
      //     },
      //   },
      // });
      // console.log("dp1============", dp1.plugins.hls); // Hls 实例
      this.dp = new DPlayer({
        container: document.getElementById("dplayer"),
        video: {
          url: "http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8",
          type: "customHls",
          autoplay: true,
          volume: 0.1,
          customType: {
            customHls: function (video, player) {
              console.log("options==========", player.options);
              const hls = new Hls({
                autoplay: true,
              });
              // const hls = new Hls();
              console.log("player==========", player, hls);
              hls.loadSource(video.src);
              hls.attachMedia(video);
            },
          },
        },
      });
    },
  },
  beforeDestroy() {
    console.log("组件销毁");
    const that = this;
    console.log("destroy前", that.dp);
    that.dp.destroy();
    console.log("destroy后", that.dp);
  },
};
</script>
<style lang="scss" scoped>
.dplayer-page {
}
</style>
